$(function(){
	var database=[
		{	name:"On Top of the World",
            author:"Imagine Dragons",
            src:"music/Imagine Dragons - On Top of the World.mp3",
            img:"img/fm.jpg",
            bg:"url(img/bg.jpg)",
          
        },
		 {name:"浮夸",
            author:"陈奕迅",
            src:"music/陈奕迅 - 浮夸.mp3",
            img:"img/fukua.jpg",
            bg:"url(img/bg1.jpg)",
           
        },
        {
			name:"十年",
			author:"陈奕迅",
			src:"music/陈奕迅 - 十年.mp3",
			img:"img/ten.jpg",
			bg:"url(img/bg2.jpg)",
		},
		{
			name:"倾城",
			author:"陈奕迅",
			src:"music/陈奕迅 - 倾城.mp3",
			img:"img/qingcheng.png",
			bg:"url(img/bg3.jpg)",
			
		},
		
		
	];
	
	var $audio=$("#audio");
    var audio=$("#audio")[0];
    var play=$(".play")
    var duration=$(".duration");
    var current=$(".current-time");
    var jdt=$(".jdt");
    var yuan=$(".yuan");
    var green=$(".green");
    var progress=$(".pragress");
    var rg=$(".rg");
    var vivo=$(".vivo");
    var touming=$(".hei-tou");
    var quxiao=$(".quxiao");
    var volume=$(".volume");
    var yuanY=$(".y-yuan");
    var hei=$(".hei");
    var jingyin=$(".laba");
    var list=$(".many-ge");
    var shang=$(".shang");
    var xia=$(".xia");
    var lis=$(".bt-lis-caidan");
    var love=$(".love");
    var currentIndex=0;
	function minitues(shuzhi){
        var fenzhong=Math.floor(shuzhi/60);//把传进来的数字变成00：00的形式，现在得到的是前边的00
        if(fenzhong<10){
            fenzhong="0"+fenzhong;
        }
        var miao=Math.floor(shuzhi%60)
        if(miao<10){
            miao="0"+miao;
        }
        return fenzhong +":"+ miao;
    }
	
	function makeGeci() {
         var lrc=database[currentIndex].geci;
         if(!lrc){
             $('.ct').html("")
             $('<span>').text("暂无歌词").appendTo('.ct')
         }else{
             $(lrc).each(function(i,v){
                 if(lrc[i].time==minitues(audio.currentTime)){
                 	$('.ct').html("")
                     for(var a=i;a<lrc.length;a++){
                         $('<span>').text(lrc[a].lrc).appendTo('.ct')
                     }
                 }
             })
         }
     }
	makeGeci();
	
	function geci() {
         var lrc=database[currentIndex].geci;
         if(!lrc){
             $('.rightb-box').html("")
             $('<li>').text("暂无歌词,请下载").appendTo('.rightb-box')
         }else{
             $(lrc).each(function(i,v){
                 if(lrc[i].time==minitues(audio.currentTime)){
                 	$('.ct').html("")
                     for(var a=i;a<lrc.length;a++){
                         $('<li>').text(lrc[a].lrc).appendTo('.rightb-box');
                         $(".rightb-box").find("li").eq(0).css("color","#31c27c")
                     }
                 }
             })
         }
     }
	geci();
	
	$(".anniu-ct").on("touchend",".div",function(){
		var index=$(this).index();
		$(this).find("span").addClass("action").siblings().removeClass("action");
		$(".link").eq(index).addClass("chuxian").siblings().removeClass("chuxian");
	})




////	console.table()
////JSON格式中，键值必须都加引号
////return false;
////阻止冒泡

	function render(){
		list.empty();
		$.each(database,function(i,v){
			var c=(i===currentIndex)? "current" : "";
			$("<li class='ge-lins "+c+"'><div class='name'><span class='ge-name'>"+v.name+"</span><span class='ge-author'> - "+v.author+"</span></div><div class='caozuo'><span class='like iconfont'>&#xe63f;</span><span class='del iconfont'>&#xe62c;</span></div></li>").appendTo(".many-ge");
		})
	}
//	
	render();
	
	
	lis.on("touchend",function(){
		$(".gequ-lis").addClass("show");
	})
	$(".close").on("touchend",function(){
		$(".gequ-lis").removeClass("show");
	})
	
	
	
	//	删除列表歌曲
    list.on("touchend",".del",function(){
    	var li=$(this).closest("li");
    	var index=li.index();
    	database.splice(index,1);
    	if(index==currentIndex){
    		if(database[currentIndex]){
    			audio.src=database[currentIndex].src;
    		}else{
    			audio.src="";
    		}
    	}
    	if(index>currentIndex){
    		
    	}
    	if(index<currentIndex){
    		currentIndex-=1;
    	}
    	render();
    })
    
    
//	点击那首歌播放哪首歌
	list.on("click","li",function(){
		list.find('li').removeClass('current');
		$(this).addClass('current');
		currentIndex=$(this).index();
		audio.src=database[currentIndex].src;
		audio.play();
	})
	
	
//	上一首
	function shangs(){
		currentIndex-=1;
		if(currentIndex<0){
			currentIndex=database.length-1;
		}
		list.find("li").removeClass('current');
		list.find('li').eq(currentIndex).addClass('current');
		audio.src=database[currentIndex].src;
		audio.play();
	}
	
	shang.on("touchend",function(){
		shangs();
	})
	
	
//	下一首
	function xiag(){
		currentIndex+=1;
		if(currentIndex==database.length){
			currentIndex=0;
		}
		list.find("li").removeClass('current');
		list.find('li').eq(currentIndex).addClass('current');
		audio.src=database[currentIndex].src;
		audio.play();
	}
	
	xia.on("touchend",function(){
		xiag();
	})
	

//			列表新增页
//			选中状态添加类名
			$(".quan").on("touchend",function(){
				$(this).find(".font").toggleClass("fontClass");
			})
//			全选
			$(".quanxuan").on("touchend",function(){
				$(".song").find(".font").toggleClass("fontClass");
			})
//			关闭增加页面
			$(".guanbi").on("touchend",function(){
				$(".song-list").removeClass("yichu");
			})
//			进入到添加页面
			$(".tianjiab").on("touchend",function(){
				$(".song-list").addClass("yichu");
			})
//			可选定的个数
			$(".all2").html("可选定"+$(".song").length+"首")

//	列表新增歌
	$(".add").on("touchend",function(){
		var d=$(".fontClass").closest(".song").attr("data");
		database.push(JSON.parse(d));
		render();
	})
			

//			将秒数转换为分钟数
			function format(v){
				v=Math.floor(v);
				var s=v%60;
				s=(s<10)? ("0"+s):s;
				var m=Math.floor(v/60);
				return m +":" +s;
			}


//			让play按钮同时实现播放与暂停						
			play.on("touchend",function(){
				if(audio.paused){
					audio.play();
					$(this).html("&#xe669;");
					
				}else {
					audio.pause();
					$(this).html("&#xe63e;");
					
				}
			})
			
			
//			实现进度条与显示当前时间
			$audio.on("canplay",function(){
				duration.html(minitues(audio.duration))	
			})
					
			$audio.on("timeupdate",function(){
				current.html(minitues(audio.currentTime));
				var left=jdt.width()*audio.currentTime/audio.duration-yuan.width()/2;
				yuan.css("left",left);
				green.css("width",left);
			})
			
			
			
//			单击设置歌曲的进度
			yuan.on("touchend",false);
			progress.on("touchend",function(e){	
				var s=e.originalEvent.changedTouches[0].clientX-$(this).offset().left;
				audio.currentTime=s/$(this).width()*audio.duration;
				yuan.css("left",s/$(this).width()-yuan.width()/2);
				green.css("width",s/$(this).width()-yuan.width()/2);
			})
			
			
//			通过进度条的拖拽来实现快进功能
			yuan.on("touchstart",function(e){
				var r=$(this).width()/2;
				var offsetX=e.originalEvent.changedTouches[0].clientX-yuan.offset().left;
				var start=r-e.offsetX;
				$(document).on("touchmove",function(e){
					var left=e.originalEvent.changedTouches[0].clientX-progress.position().left+start;
					var c=left/progress.width();
					if(c>=1||c<=0){
						return;
					}
					$audio.currentTime=c;
					yuan.css("left",left-r);
					green.css("width",left-r)
				})
			})
			$(document).on("touchend",function(){
				$(document).off("touchmove")
			})			
			
//			手指接触...出现音量条
			$(".weituo").on("touchend",function(){
				rg.find(".vivo").addClass("active");
					touming.addClass("toum");
			})
			$(".quxiao").on("touchend",function(){
				$(this).closest(".vivo").removeClass("active");
					touming.removeClass("toum");
			})
			
			
//			单击音量条来设置音量
			volume.on('touchend',function(e){
				var length=e.originalEvent.changedTouches[0].clientX-$(this).offset().left;
			    audio.volume = length / $(this).width();
			    jingyin.removeAttr('data-v');
				var left=length-yuanY.width()/2;
			    yuanY.css("left",left);
			    hei.css("width",left);
			  })
			
			
//			静音	
			jingyin.on("touchend",function(){
				if($(this).attr("data-v")){
					audio.volume=$(this).attr("data-v");
					var left=volume.width()*audio.volume-yuanY.width()/2;
					hei.css("width",left);
					yuanY.css("left",left);
					$(this).removeAttr('data-v');
				}else{
					$(this).attr("data-v",audio.volume);
					audio.volume=0;
					yuanY.css("left",-yuanY.width()/2);
					hei.css("width",0);
				}
			})						
//			yuanY的拖拽
			yuanY.on("touchend",false);
			yuanY.on("touchstart",function(e){
				var r=yuanY.width()/2;
				var offsetX=e.originalEvent.changedTouches[0].clientX-$(this).offset().left;
				var start=r-offsetX;
				$(document).on("touchmove",function(e){
					var clientX=e.originalEvent.changedTouches[0].clientX;
					var left=clientX-volume.position().left+start;
					var v=left/volume.width();
					if(v>=1||v<=0){
						return;
					}
					audio.volume=v;
					yuanY.css("left",left-r);
					hei.css("width",left-r);
				})
			})
			$(document).on("touchend",function(){
				$(document).off("touchmove");
			})
			

			
////	列表切换歌曲
	$audio.on("touchend",function(){
//		audio.src=""
	})
//	所有audio上面的事件
	$audio.on("loadstart",function(){
		$(".title").html(database[currentIndex].name);
		$(".author").html("-- "+database[currentIndex].author+" --");
		$(".beijing").css("background-image",database[currentIndex].bg)
		$(".img")[0].src=database[currentIndex].img;
		$(".author-shu").html(database[currentIndex].author);
		$(".name-shu").html(database[currentIndex].name);
		$(".geshou").find("img")[0].src=database[currentIndex].img;
	})
	$audio.on("canplay",function(){
		
	})
	$audio.on("progress",function(){
		
	})
	$audio.on("play",function(){
		makeGeci();
	
	})
	$audio.on("pause",function(){
		
	})
	$audio.on("ended",function(){
		
	})
	$audio.on("seek",function(){
		
	})
	$audio.on("timeupdate",function(){
		
	})
})
